<template>
  <div class="role-lists">
      <el-card class="!border-none" shadow="never">
          <div>
              <el-button type="primary" @click="handleAdd">
                  <template #icon>
                      <icon name="el-icon-Plus" />
                  </template>
                  新增
              </el-button>
          </div>
          <div class="mt-4" v-loading="pager.loading">
              <div>
                  <el-table :data="pager.lists" size="large">
                      <el-table-column  prop="id" label="ID" min-width="100" />
                      <el-table-column prop="name" label="名称" min-width="150" />
                      <el-table-column
                          prop="remark"
                          label="备注"
                          min-width="150"
                          show-overflow-tooltip
                      />
                      <el-table-column prop="sort" label="排序" min-width="100" />
                      
                      <el-table-column label="创建时间"  min-width="180">
                        <template #default="{ row }"> 
                          {{row.createdAt }}
                        </template>
                      </el-table-column> 
                      <el-table-column label="操作" width="200" fixed="right">
                          <template #default="{ row }">
                              <el-button
                                  link
                                  type="primary"
                                  @click="handleEdit(row)"
                              >
                                  编辑
                              </el-button>
                              <el-button
                                  link
                                  :disabled="row.admin === 1"
                                  type="primary"
                                  @click="handleAuth(row)"
                              >
                                  分配权限
                              </el-button>
                              <el-button
                                  :disabled="row.admin === 1"
                                  v-perms="['role/delete']"
                                  link
                                  type="danger"
                                  @click="handleDelete(row.id)"
                              >
                                  删除
                              </el-button>
                          </template>
                      </el-table-column>
                  </el-table>
              </div> 
          </div>
      </el-card>
      <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
      <auth-popup v-if="showAuth" ref="authRef" @success="getLists" @close="showAuth = false" />
  </div>
</template>

<script  setup name="role">
import { getRoleList,roleDelete } from '@/apis/system/role'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import AuthPopup from './auth.vue'
const editRef = shallowRef()
const authRef = shallowRef()
const showEdit = ref(false)
const showAuth = ref(false)
const { pager, getLists } = usePaging({
  fetchFun: getRoleList
})
const handleAdd = async () => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('add')
}

const handleEdit = async (data) => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('edit')
  editRef.value?.setFormData(data)
}

const handleAuth = async (data) => {
  showAuth.value = true
  await nextTick()
  authRef.value?.open()
  authRef.value?.setFormData(data)
}

// 删除角色
const handleDelete = async (id) => {
  await feedback.confirm('确定要删除？')
  await roleDelete({ id })
  getLists()
}

onMounted(() => {
  getLists()
})
</script>
